﻿@model IEnumerable<User>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>华南人资系统</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
</head>
<body>
 <style type="text/css">
    #dept_main, #dept_particulars{
        width: 48.5%;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background: white;
        box-sizing: border-box;
    }
    #dept_tree{
        margin-top: 20px;
    }

    .layui-form-label {
        width:auto
    }

</style>

 <div id="dept_particulars" class="layui-card">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>用户列表</legend>
    </fieldset>
   <input name="Query"  placeholder="模糊查询" class="layui-input">
   <div id="UserList" class="demo-tree demo-tree-box"></div>
    
</div>

<div id="dept_main" class="layui-card">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>组织列表</legend>
    </fieldset>
    @*<button id="addDept" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="addDept"><i class="layui-icon">&#xe654;</i>添加部门</button>*@
    @*<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="gain">获取选中节点</button>*@
    <div class="layui-btn-container">
            <form class="layui-form" action="" lay-filter="user">
                <div class="layui-form-item">
                    <label class="control-label layui-form-label">用户：</label>
                    <div class="layui-input-block">
                        <input name="UserName" class="form-control layui-input" readonly />
                        <span class="text-danger"></span>
                    </div>
                </div>
            </form>
    </div>
    <div id="Org_dept">
            <div class="layui-tree-emptyText">加载中...</div>
    </div>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-normal" id="Save">保存</button>
        </div>
</div>


    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['form', 'util', 'laydate', 'tree'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            var laydate = layui.laydate;
            var tree = layui.tree;

            //渲染组织树
            var inst1 = tree.render({
                elem: '#Org_dept',  //绑定元素
                data: getOrgTreeData(),
                id: 'treeId',
                showCheckbox: true,     //是否显示复选框
                onlyIconControl: false  //是否仅允许节点左侧图标控制展开收缩
            });

            //渲染用户列表
            var inst1 = tree.render({
                elem: '#UserList',  //绑定元素
                data: getUserList(),
                id: 'UserListId',
                showCheckbox: false,     //是否显示复选框
                onlyIconControl: false,  //是否仅允许节点左侧图标控制展开收缩
                click: function (obj) {
                    //表单赋值
                    form.val('user', {
                        "UserName": obj.data.title
                    });
                }
            });

            //增加同级
            layui.$('#AddEL').on('click', function () {
                var data = form.val('example');
                $("#dept_home").load("../Orgs/Create/" + data.ID);
            });


        });

        function getOrgTreeData() {
            var data = [];
            $.ajax({
                url: "/TreeData/GetOrgTreeDataParams",    //后台数据请求地址
                type: "post",
                async: false,
                success: function (resut) {
                    data = resut;
                }
            });
            return data;
        }

        function getUserList() {
            var data = [];
            $.ajax({
                url: "/TreeData/getUserList",    //后台数据请求地址
                type: "post",
                async: false,
                success: function (resut) {
                    data = resut;
                }
            });
            return data;
        }
    </script>
</body>
</html>
